<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="utf-8">
	<title>T&T Offer Patterns</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
	<script src="https://t-and-t-tool.googlecode.com/svn/trunk/editArea/edit_area_full.js"></script>

</head>
<body style="font-size: 12px;">

<form action="#">

	<fieldset>
		<label for="ttOfferPatternSelect">Select an offer pattern</label>
		<select name="ttOfferPatternSelect" id="ttOfferPatternSelect">
			<option value="_select_" selected="selected">Please select</option>
			<option value="ftbProductPromoCarouselNoRHS">FTB ProductPromoCarousel (no RHS info)</option>
			<option value="ftbProductPromoCarouselWithRHS">FTB ProductPromoCarousel (with RHS info)</option>
			<!--

			<option value="ftbGhostAccount">FTB GhostAccount</option>
			-->
		</select>
	</fieldset>


	<fieldset class="ftbProductPromoCarouselNoRHSFS ttOfferPatternInputs">
		<label for="ftbProductPromoCarouselNoRHSFS_Image_URL">Image URL</label>
		<input type="text" value="" id="ftbProductPromoCarouselNoRHSFS_Image_URL" placeholder="example: /OLB/A/Content/Images/1242645340532-globe-icon.png" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselNoRHSFS_Image_ALT">Image ALT</label>
		<input type="text" value="" id="ftbProductPromoCarouselNoRHSFS_Image_ALT" placeholder="example: Global promo" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselNoRHSFS_Title">Title (H3 value, don't add tags)</label>
		<input type="text" value="" id="ftbProductPromoCarouselNoRHSFS_Title" placeholder="example: Personalise your debit card" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselNoRHSFS_MainCopy">Main copy (HTML, use tags to make 2 paragraphs or add links, change/remove/add target to _blank)</label>
		<textarea id="ftbProductPromoCarouselNoRHSFS_MainCopy" placeholder='example: <p>Upload your favourite photo or choose from our extensive gallery. <a href="http://barclays.co.uk/P1235761253" target="_blank" class="tt_cta">Get card</a></p>'></textarea>
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<input type="button" value="Generate HTML" class="btn" />
	</fieldset>

	<fieldset class="ftbProductPromoCarouselWithRHSFS ttOfferPatternInputs">
		<label for="ftbProductPromoCarouselWithRHSFS_Image_URL">Image URL</label>
		<input type="text" value="" id="ftbProductPromoCarouselWithRHSFS_Image_URL" placeholder="example: /OLB/A/Content/Images/1242645340532-globe-icon.png" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselWithRHSFS_Image_ALT">Image ALT</label>
		<input type="text" value="" id="ftbProductPromoCarouselWithRHSFS_Image_ALT" placeholder="example: Global promo" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselWithRHSFS_Title">Title (H3 value, don't add tags)</label>
		<input type="text" value="" id="ftbProductPromoCarouselWithRHSFS_Title" placeholder="example: Tailor your account" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselWithRHSFS_RHSLine1">RHS Line 1 (bigger size)</label>
		<input type="text" value="" id="ftbProductPromoCarouselWithRHSFS_RHSLine1" placeholder="example: &pound;10" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<label for="ftbProductPromoCarouselWithRHSFS_RHSLine2">RHS Line 2 (smaller size)</label>
		<input type="text" value="" id="ftbProductPromoCarouselWithRHSFS_RHSLine2" placeholder="example: per month" />
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>


		<label for="ftbProductPromoCarouselWithRHSFS_MainCopy">Main copy (HTML, use tags to make 2 paragraphs or add links, change/remove/add target to _blank)</label>
		<textarea id="ftbProductPromoCarouselWithRHSFS_MainCopy" placeholder='example: <p>Upload your favourite photo or choose from our extensive gallery. <a href="http://barclays.co.uk/P1235761253" target="_blank" class="tt_cta">Get card</a></p>'></textarea>
		<a href="#" class="ttCopyFromExample" title="Copy from example">*</a>

		<input type="button" value="Generate HTML" class="btn" />
	</fieldset>

	<!--


	<fieldset class="ftbGhostAccountFS ttOfferPatternInputs">
		<label for="ftbGhostAccountFS_Image_URL">Image URL</label>
		<input type="text" value="" id="ftbGhostAccountFS_Image_URL" />

		<input type="button" value="Generate HTML" class="btn" />
	</fieldset>
	-->

	<fieldset class="ttOfferPatternOutput">
		<label for="ttOfferPatternOutputHTML" style="margin-top: 10px;">Output HTML <span style="font-size:11px; display: block; margin-top: 10px; width: 170px;">Modify the HTML if needed, then select all and copy.</span></label>
		<textarea id="ttOfferPatternOutputHTML" class="html"></textarea>
	</fieldset>

</form>
<style>
	fieldset {
		border: 0;
	}
	label {
		display: block;
		margin: 15px 0 0 0;
		width: 213px;
		float: left;
		font-family: sans-serif;
		font-size: 1em;
		color: darkslateblue;
	}
	select {
		width: 785px;
		font-size: 12px;
	}
	.overflow {
		height: 200px;
	}

	.ttCopyFromExample {
		text-decoration: none;
		color: grey;
		font-size: 13px;
		padding: 0 5px;
		float: left;
	}

	.ttOfferPatternInputs, .ttOfferPatternOutput {
		display: none;
	}

	.ttOfferPatternInputs label,
	.ttOfferPatternOutput label{
		clear: both;
		float: left;
		margin: 2px 10px 0 0;
		width: 200px;
	}

	.ttOfferPatternInputs input,
	.ttOfferPatternInputs textarea,
	.ttOfferPatternOutput textarea{
		float: left;
		width: 780px;
		padding: 5px 2px;
		font-size: 1em;
	}

	.ttOfferPatternInputs .btn {
		clear: both;
		margin-top: 30px;
		font-size: 12px;
		width: auto;
	}

	.ttOfferPatternInputs textarea{
		height: 100px;
		font-size: 1em;
		width: 782px;
	}

	.ttOfferPatternOutput{
		position: relative;
	}

	.ttOfferPatternOutput #ttOfferPatternOutputHTML {
		height: 490px;
		overflow-x: scroll;
		overflow-y: scroll;
		word-wrap: normal;
		width: 770px;
		background-color: #fff;
		border: 2px outset dodgerblue;
	}

</style>
<script type="text/javascript">

	$(function(){

		$("#ttOfferPatternSelect").selectmenu({
			change: function( event, data ) {
				$('.ttOfferPatternInputs').hide();
				$('.ttOfferPatternOutput').hide();
				$('#ttOfferPatternOutputHTML').html('');
				$('#ttOfferPatternOutputHTML').attr('class','html');

				if (data.item.value!="_select_"){
					$('.' + data.item.value + 'FS.ttOfferPatternInputs').show();
				}
			}
		});

		$("form")[0].reset();

		$('.ttOfferPatternInputs .ttCopyFromExample').click(function(e){
			e.preventDefault();
			var ttPlaceholderVal = $(this).prev('[placeholder]').attr('placeholder').replace('example: ','');
			$(this).prev('[placeholder]').val(ttPlaceholderVal);
			return false;
		});

		$('.ttOfferPatternInputs .btn').click(function(e){
			var ttPatternSelected = $(this).closest('.ttOfferPatternInputs').attr('class').replace('FS ttOfferPatternInputs','');
			var ttOutputHTML = '';

			switch (ttPatternSelected) {
				case 'ftbProductPromoCarouselNoRHS':

					var ftbProductPromoCarouselNoRHSFS_Image_URL = $('#ftbProductPromoCarouselNoRHSFS_Image_URL').val(),
						ftbProductPromoCarouselNoRHSFS_Image_ALT = $('#ftbProductPromoCarouselNoRHSFS_Image_ALT').val(),
						ftbProductPromoCarouselNoRHSFS_Title = $('#ftbProductPromoCarouselNoRHSFS_Title').val().replace(/£/g,'&pound;'),
						ftbProductPromoCarouselNoRHSFS_MainCopy = $('#ftbProductPromoCarouselNoRHSFS_MainCopy').val().replace(/£/g,'&pound;');

					if (
						ftbProductPromoCarouselNoRHSFS_Image_URL=='' ||
						ftbProductPromoCarouselNoRHSFS_Image_ALT=='' ||
						ftbProductPromoCarouselNoRHSFS_Title=='' ||
						ftbProductPromoCarouselNoRHSFS_MainCopy==''
					){
						alert('Please provide information for all fields!');
						break;
					}else{
						ttOutputHTML="\x3C!-- the ID should be unique, so it\'s formed dynamically from the mbox name, acc_type and acc_instance parameters\n needs to begin with the original mbox name, to match the base CSS file selectors! --\x3E" +
								"\n\x3Cdiv id=\"${mbox.name}_${mbox.acc_type}_${mbox.acc_instance}\" class=\"clearfix\"\x3E" +
								"\n\t\x3Cdiv class=\"snippet\"\x3E" +
								"\n\t\t\x3Cul\x3E" +
								"\n\t\t\t\x3Cli\x3E" +
								"\n\t\t\t\t\x3Cimg src=\""+ftbProductPromoCarouselNoRHSFS_Image_URL+"\" alt=\""+ftbProductPromoCarouselNoRHSFS_Image_ALT+"\" height=\"34\" width=\"34\"\x3E" +
								"\n\t\t\t\t\x3Ch3\x3E"+ftbProductPromoCarouselNoRHSFS_Title+"\x3C\x2Fh3\x3E" +
								"\n\t\t\t\t" +ftbProductPromoCarouselNoRHSFS_MainCopy+
								"\n\t\t\t\x3C\x2Fli\x3E" +
								"\n\n\t\t\x3C\x2Ful\x3E" +
								"\n\t\x3C\x2Fdiv\x3E" +
								"\n\x3C\x2Fdiv\x3E" +
								"\n\x3Cstyle type=\"text\x2Fcss\"\x3E" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet {" +
								"\n\t\theight: auto;" +
								"\n\t\tmin-height: 133px;" +
								"\n\t}" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet h3 {" +
								"\n\t\t float: left;" +
								"\n\t\t min-height: 34px;" +
								"\n\t\t width: 250px;" +
								"\n\t\t line-height: 1.2;" +
								"\n\t }" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet p {" +
								"\n\t\t line-height: 1.6;" +
								"\n\t\t clear: both;" +
								"\n\t }" +
								"\n\x3C\x2Fstyle\x3E" +
								"\n\x3Cscript type=\"text\x2Fjavascript\"\x3E" +
								"\n\t$(function() {" +
								"\n\t\t\x2F\x2FTracking" +
								"\n\n\t\t$(\'#tt${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} a.tt_cta\').live(\'mousedown\',function(e){" +
								"\n\t\t\tvar $ttTagText1=$(this).text().replace(\x2F\\W+\x2Fg, \'\'); \x2F\x2Fthis could be further customized based on business requirements" +
								"\n\t\t\ts.linkTrackVars=\'prop17,prop74,eVar44,events\';" +
								"\n\t\t\ts.linkTrackEvents=\'event5\';" +
								"\n\t\t\ts.prop17=s.pageName;" +
								"\n\t\t\ts.prop74=$ttTagText1;" +
								"\n\t\t\ts.eVar44=\'${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}\';" +
								"\n\t\t\ts.events=\'event5\';" +
								"\n\t\t\ttt_Log(\'MainCTA_${mbox.acc_instance}\');" +
								"\n\t\t\ts.tl(true, \'o\', \'TNT Clickthrough\');" +
								"\n\t\t});" +
								"\n\t});" +
								"\n\x3C\x2Fscript\x3E" +
								"\n";

						$('#ttOfferPatternOutputHTML').text(ttOutputHTML);

						$('.ttOfferPatternOutput').show();
					}
					break;


				case 'ftbProductPromoCarouselWithRHS':

					var ftbProductPromoCarouselWithRHSFS_Image_URL = $('#ftbProductPromoCarouselWithRHSFS_Image_URL').val(),
							ftbProductPromoCarouselWithRHSFS_Image_ALT = $('#ftbProductPromoCarouselWithRHSFS_Image_ALT').val(),
							ftbProductPromoCarouselWithRHSFS_Title = $('#ftbProductPromoCarouselWithRHSFS_Title').val(),
							ftbProductPromoCarouselWithRHSFS_RHSLine1 = $('#ftbProductPromoCarouselWithRHSFS_RHSLine1').val().replace(/£/g,'&pound;'),
							ftbProductPromoCarouselWithRHSFS_RHSLine2 = $('#ftbProductPromoCarouselWithRHSFS_RHSLine2').val().replace(/£/g,'&pound;'),
							ftbProductPromoCarouselWithRHSFS_MainCopy = $('#ftbProductPromoCarouselWithRHSFS_MainCopy').val().replace(/£/g,'&pound;');

					if (
							ftbProductPromoCarouselWithRHSFS_Image_URL=='' ||
							ftbProductPromoCarouselWithRHSFS_Image_ALT=='' ||
							ftbProductPromoCarouselWithRHSFS_Title=='' ||
							ftbProductPromoCarouselWithRHSFS_MainCopy==''
							){
						alert('Please provide information for all fields!');
						break;
					}else{
						ttOutputHTML="\x3C!-- the ID should be unique, so it\'s formed dynamically from the mbox name, acc_type and acc_instance parameters\n needs to begin with the original mbox name, to match the base CSS file selectors! --\x3E" +
								"\n\x3Cdiv id=\"${mbox.name}_${mbox.acc_type}_${mbox.acc_instance}\" class=\"clearfix\"\x3E" +
								"\n\t\x3Cdiv class=\"snippet\"\x3E" +
								"\n\t\t\x3Cul\x3E" +
								"\n\t\t\t\x3Cli\x3E" +
								"\n\t\t\t\t\x3Cimg src=\""+ftbProductPromoCarouselWithRHSFS_Image_URL+"\" alt=\""+ftbProductPromoCarouselWithRHSFS_Image_ALT+"\" height=\"34\" width=\"34\"\x3E" +
								"\n\t\t\t\t\x3Ch3\x3E"+ftbProductPromoCarouselWithRHSFS_Title+"\x3C\x2Fh3\x3E" +
								"\n\t\t\t\t\x3Cdiv class=\"ttProductPromoCarouselRHS\"\x3E" +
								"\n\t\t\t\t\t\x3Cdiv class=\"ttProductPromoCarouselRHS_Line1\"\x3E" + ftbProductPromoCarouselWithRHSFS_RHSLine1 + "\x3C\x2Fdiv\x3E" +
								"\n\t\t\t\t\t\x3Cdiv class=\"ttProductPromoCarouselRHS_Line2\"\x3E" + ftbProductPromoCarouselWithRHSFS_RHSLine2 + "\x3C\x2Fdiv\x3E" +
								"\n\t\t\t\t\x3C\x2Fdiv\x3E" +
								"\n\t\t\t\t" +ftbProductPromoCarouselWithRHSFS_MainCopy+
								"\n\t\t\t\x3C\x2Fli\x3E" +
								"\n\n\t\t\x3C\x2Ful\x3E" +
								"\n\t\x3C\x2Fdiv\x3E" +
								"\n\x3C\x2Fdiv\x3E" +
								"\n\x3Cstyle type=\"text\x2Fcss\"\x3E" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet {" +
								"\n\t\theight: auto;" +
								"\n\t\tposition: relative;" +
								"\n\t\tmin-height: 133px;" +
								"\n\t}" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet h3 {" +
								"\n\t\t min-height: 34px;" +
								"\n\t\t float: left;" +
								"\n\t\t width: 115px;" +
								"\n\t\t line-height: 1.2;" +
								"\n\t }" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet p {" +
								"\n\t\t clear: both;" +
								"\n\t\t line-height: 1.6;" +
								"\n\t }" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet .ttProductPromoCarouselRHS {" +
								"\n\t\t position: absolute;" +
								"\n\t\t right: 15px;" +
								"\n\t\t top: 20px;" +
								"\n\t }" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet .ttProductPromoCarouselRHS_Line1 {" +
								"\n\t\t display: block;" +
								"\n\t\t font-size: 1.8em;" +
								"\n\t\t text-align: right;" +
								"\n\t }" +
								"\n\t#${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} .snippet .ttProductPromoCarouselRHS_Line2 {" +
								"\n\t\t display: block;" +
								"\n\t\t font-size: 1em;" +
								"\n\t\t text-align: right;" +
								"\n\t }" +
								"\n\x3C\x2Fstyle\x3E" +
								"\n\x3Cscript type=\"text\x2Fjavascript\"\x3E" +
								"\n\t$(function() {" +
								"\n\t\t\x2F\x2FTracking" +
								"\n\n\t\t$(\'#tt${mbox.name}_${mbox.acc_type}_${mbox.acc_instance} a.tt_cta\').live(\'mousedown\',function(e){" +
								"\n\t\t\tvar $ttTagText1=$(this).text().replace(\x2F\\W+\x2Fg, \'\'); \x2F\x2Fthis could be further customized based on business requirements" +
								"\n\t\t\ts.linkTrackVars=\'prop17,prop74,eVar44,events\';" +
								"\n\t\t\ts.linkTrackEvents=\'event5\';" +
								"\n\t\t\ts.prop17=s.pageName;" +
								"\n\t\t\ts.prop74=$ttTagText1;" +
								"\n\t\t\ts.eVar44=\'${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}\';" +
								"\n\t\t\ts.events=\'event5\';" +
								"\n\t\t\ttt_Log(\'MainCTA_${mbox.acc_instance}\');" +
								"\n\t\t\ts.tl(true, \'o\', \'TNT Clickthrough\');" +
								"\n\t\t});" +
								"\n\t});" +
								"\n\x3C\x2Fscript\x3E" +
								"\n";

						$('#ttOfferPatternOutputHTML').text(ttOutputHTML);

						$('.ttOfferPatternOutput').show();
					}
					break;

				default:

					break;
			}

			/*

			 // Highlight code

			 $('#ttOfferPatternOutputHTML').each(function(i, block) {
			 hljs.highlightBlock(block);
			 });
			 */
		});
	});
</script>
</body>
</html>